<template>
  <XForm ref="XForm" :formList="formList" :formData="formData" size="medium" label-position="top">
    <template v-slot:btn>
      <XBtn :formData="formData" :XForm="$refs['XForm']" @onSubmit="onSubmit" />
    </template>
  </XForm>
</template>

<script>
import { XForm } from '@/components/@fhsy/x-tool'
import XBtn from '@/components/common/XBtn'
export default {
  components: { XForm, XBtn },
  data: () => ({
    formList: [
      { label: '文件',
        prop: 'file',
        type: 'XFiles',
        action: 'https://x-tool.faig.top/x-tool/upload',
        attrs: {
          sizeMax: 5120
        }
      },
      { label: '照片墙',
        prop: 'photoWall',
        type: 'XFiles2',
        action: 'https://x-tool.faig.top/x-tool/upload',
        rules: [
          { isNull: true }
        ],
        attrs: {
          accept: 'image/png,image/jpeg',
          isAccept: true, // 强制上传限制格式
          data: {
            id: 1
          }
        }
      },
      { label: '身份证',
        tips: '证件人像面',
        prop: 'idCard',
        type: 'XFiles2',
        action: 'https://x-tool.faig.top/x-tool/upload',
        attrs: {
          accept: 'image/png,image/jpeg',
          isAccept: true, // 强制上传限制格式
          limit: 1,
          width: '240px',
          height: '100px'
        }
      },
      { label: '城市', prop: 'city', type: 'XCity', attrs: { level: 3 } },
      { label: '民族', prop: 'nation', type: 'XNation' },
      { label: '内容', prop: 'context', type: 'XRichText', span: 24 },
      { slot: 'btn', span: 24, style: { display: 'flex', justifyContent: 'flex-end' } }
    ],
    formData: {}
  }),
  methods: {
    onSubmit () {
      this.$message(`回调: ${JSON.stringify(this.formData)}`)
    }
  }
}
</script>
